<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>game</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			background:gray;
		}
		#BOX{
			width:606px;
			height:606px;
			border:none;
			background:yellow;
			position:absolute;
			left:260px;
			top:5px;
			padding:10px;
		}
		#BOX div{
			width:200px;
			height:200px;
			border:1px solid black;
			float:left;
			background:green;
			font-size:160px;
			color:black;
			line-height:200px;
			text-align:center;
			cursor:pointer;
		}
		#bt_1{
			position:absolute;
			left:1000px;
			top:260px;
		}
		#bt_2{
			position:absolute;
			left:1000px;
			top:320px;
		}
	</style>
	<script type="text/javascript">
		var times = 0;
		var chess= [];
		for(var i = 0;i < 3;i++){
			chess[i] = new Array(3);
		}
		initchess();

		function restart()
		{
			for (var i = 1;i < 10; i ++) 
				{
					var re = document.getElementsByTagName("div")[i];
					re.innerHTML = '';
				}	
				times = 0;
		}
		
		function start(i)
		{

			var change = document.getElementsByTagName("div")[i];
			times++;
			var posx;
			var posy;
			
			
			
			if(times > 5)
				check();
		
			if(times%2==0)
				{
					change.innerHTML = 'o';
				}
			else
				{
					change.innerHTML = 'x';
				}


			switch(i%3){
				case 0:
					posx = 2;
					break;
				case 1:
					posx = 0;
					break;
				case 2:
					posx = 1;
					break;
			}
			
			if(i >= 1 && i <= 3){
				posy = 0;
				
			} else if (i >= 4 && i<= 6){
				posy = 1;
			} else {
				posy = 2;
				
			}
			chess[posy][posx] = times%2;

			if(isOver(posx,posy,times%2)){
				if(times%2 == 1){
					alert("X胜利");
				}else{
					alert("0胜利");
				}
				restart();
				initchess();
			}
			
		}
		
		function end()
		{
			var con;
			restart();
			con = confirm("你确定结束吗？");
			if(con == true)
				{
					window.opener = null;
					window.open('', '_self');
					window.close();
				}
			else 
				{
					;
				}
		}

		function check()
		{
			var ch = document.getElementsByTagName("div");

		}

		function initchess(){
			for(var i = 0;i < 3;i++){
				for(var j = 0;j < 3;j++){
					chess[i][j] = -1;
				}
			}
		}
		function isOver(posx,posy,flag){
			var num = 0;
			for(var x = 0;x < 3;x++){
				if(chess[posy][x] == flag)
					num++;
				if(num == 3)
					return true;
			}


			num = 0;
			for(var y = 0;y < 3;y++){
				if(chess[y][posx] == flag)
					num++;
				if(num == 3)
					return true;
			}

			num = 0;
			if(posx == posy){
				for(var x = 0,y = 0;x < 3 && y < 3;x++,y++){
					if(chess[y][x] == flag)
						num++;
					if(num == 3)
						return true;
				}
			}


			num = 0;
			if(posx + posy == 2){
				// alert("posx:"+posx+" posy:"+posy);
				for(var x = 2,y = 0;x >= 0 && y <= 2;x--,y++){
					if(chess[y][x] == flag)
						num++;
					if(num == 3)
						return true;
				}
				
			}
			return false;
				
		}
		

	</script>
</head>
<body>
	<div id="BOX">
		<div id="box_1" onclick="start(1),check()"></div>
		<div id="box_2" onclick="start(2),check()"></div>
		<div id="box_3" onclick="start(3),check()"></div>
		<div id="box_4" onclick="start(4),check()"></div>
		<div id="box_5" onclick="start(5),check()"></div>
		<div id="box_6" onclick="start(6),check()"></div>
		<div id="box_7" onclick="start(7),check()"></div>
		<div id="box_8" onclick="start(8),check()"></div>
		<div id="box_9" onclick="start(9),check()"></div>
	</div>
	<button id="bt_1" onclick="restart()">restart</button>
	<button id="bt_2" onclick="end()">end</button>
</body>
</html>